<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			#box{
				width:100vw;
				height:100vh;
				background: chocolate;
				text-align: center;
				line-height: 100vh;
				color:white;
				font-size:40px;
				position:relative;
			}
			#box p{
				width:100vw;
				height: 40px;
				line-height: 40px;
				text-align: center;
				position:absolute;
				top:-40px;
				color:black;
			}
			
		</style>
		<script>
		
			window.onload = function(){
				var oBox = document.getElementById("box");
//				 开始触屏的位置   移动的手指位置    移动过的距离
				var startT,        moveT,         disT;
				oBox.addEventListener('touchstart',function(ev){
					var ev = window.event || ev;
//					获取手指距离可视区域顶部的距离
					startT = ev.changedTouches[0].clientY;
//					清楚过度时间
					this.style.transition = '';
				})
				oBox.addEventListener('touchmove',function(ev){
					var ev = window.event || ev;
//					实时获取手指距离顶部的距离
					moveT = ev.changedTouches[0].clientY;
//					实时获取手指移动过的距离
					disT = moveT - startT;
//					将实时的数据赋给top,使box能跟谁手指移动
					oBox.style.top = disT + 'px';
				})
				oBox.addEventListener('touchend',function(){
//					手指放开时,使box回到顶部
					this.style.top = '0px';
//					加入过度时间,使其有动画效果
					this.style.transition = '1s';
				})
			}
		</script>
	</head>
	<body>
		<div id="box">
			<p>正在加载数据</p>
		</div>
	</body>
</html>
